<template>
	<view class="list-container">
		<view class="item" v-for="(item,index) in list" :key='index' @click="jump">
			<image :src="item.img" mode="widthFix"></image>
			<view class="title">
				{{item.title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						img:require('@/static/image/sceneStream/pic-3.png'),
						title:'剑门关',
						url:'../sceneStream/sceneStreamDetail'
					},
					{
						img:require('@/static/image/sceneStream/pic-4.png'),
						title:'双旗美村'
					},
					{
						img:require('@/static/image/sceneStream/pic-3.png'),
						title:'天坑景区'
					},
					{
						img:require('@/static/image/sceneStream/pic-4.png'),
						title:'明月峡'
					},
					{
						img:require('@/static/image/sceneStream/pic-5.png'),
						title:'女皇故里'
					},
					{
						img:require('@/static/image/sceneStream/pic-6.png'),
						title:'水磨沟景区'
					},
					{
						img:require('@/static/image/sceneStream/pic-7.png'),
						title:'千佛崖'
					},
					{
						img:require('@/static/image/sceneStream/pic-8.png'),
						title:'剑门关'
					},
					{
						img:require('@/static/image/sceneStream/pic-9.png'),
						title:'鼓城山七里峡'
					},
					{
						img:require('@/static/image/sceneStream/pic-10.png'),
						title:'一线天'
					},
				]
			};
		},methods:{
			jump(){
				uni.showLoading({
					title:'加载中...',
				})
				uni.navigateTo({
					url:'../sceneStream/sceneStreamDetail',
					success: () => {
						uni.hideLoading()
					},
					fail: () => {
						uni.showToast({
							title:'加载失败，请重试',
							mask:true,
							icon:'error'
						})
					},
				})
			}
		}
	}
</script>

<style lang="scss">
.list-container{
	padding: 32rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.item{
		image{
			min-width: 200rpx;
			min-height: 200rpx;
			border-radius: 16rpx;
			width: 328rpx;
			height: 240rpx;
			display: block;
		}
		.title{
			padding: 15rpx;
		}
	}
}
</style>
